﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选练习</title>
</head>
<body>

<form>
  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>

<script type="text/javascript" src="../常见效果/jquery-1.10.1.js"></script>
<script>
  $(function () {
    //所有爱好多选框
    var $checkboxes = $('[name=items]')
    //全选框
    var $checkedAllBox = $('#checkedAllBox')

    //全选按钮
    $("#checkedAllBtn").click(function () {
      $checkboxes.prop('checked',true)
      $('#checkedAllBox').prop('checked',true)
    })

    //全不选按钮
    $('#checkedNoBtn').click(function () {
      $checkboxes.prop('checked',false)
      $('#checkedAllBox').prop('checked',false)
    })

    //反选按钮
    $("#checkedRevBtn").click(function () {
      //默认上面的标志按钮为true
      $('#checkedAllBox').prop('checked',true)
      $checkboxes.each(function () {
        //将爱好的状态取反
        $(this).prop('checked',!this.checked)
        //只要有一个没有选，就取消上面的全选
        if ($(this).prop('checked')===false){
          $('#checkedAllBox').prop('checked',false)
        }
      })
    })

    //提交按钮
    $('#sendBtn').click(function () {
      //找到被选中爱好
      var $hobbies = $checkboxes.filter(':checked')
      $hobbies.each(function () {
        console.log($(this).val())
      })
    })

    //使爱好框和上面的全选框保持一致
    $checkedAllBox.click(function () {
      $checkboxes.prop('checked',this.checked)
    })

    //点击爱好框的时候，实时更新全选框
    $checkboxes.click(function () {
      //默认设置全选框为true
      $checkedAllBox.prop('checked',true)
      //每次点击爱好框的时候，检测每一个爱好框
      $checkboxes.each(function () {
        //只要有一个爱好框没有勾上，就不是全选
        if (this.checked === false){
          $checkedAllBox.prop('checked',false)
        }
      })
    })

  })
</script>
</body>

</html>